<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>战神 | 管理后台</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />

    <!-- jQuery 2.0.2 -->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">

</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="">
        <!-- Content Header (Page header) -->

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">所有角色</h3>
                            <div class="box-tools">
                                <form method="post">
                                <div class="input-group">
                                    <input type="text" id="keyword_input" name="keyword" class="form-control input-sm pull-right" style="width: 150px;" value="${keyword!}" placeholder="Search"/>
                                    <input type="hidden" id="keyword_page_id" name="pageNo" value="">
                                    <div class="input-group-btn">
                                        <button id="keyword_btn" class="btn btn-sm btn-default" type="submit"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tr>
                                    <th>ID</th>
                                    <th>角色名</th>
                                    <th>标签</th>
                                    <th>创建日期</th>
                                    <th>状态</th>
                                    <th>权限</th>
                                    <th>操作</th>
                                </tr>
                                <#list pager.content as role>
                                    <tr>
                                        <td>${role.roleId}</td>
                                        <td>${role.roleName}</td>
                                        <td>${role.roleTag}</td>
                                        <td>${role.createTime?string("yyyy-MM-dd")}</td>
                                        <td><#if role.status==1>
                                            <span class="label label-success">正常</span>
                                        <#else >
                                            <span class="label label-danger">停用</span>
                                        </#if></td>
                                        <td style="max-width: 350px;">
                                            <#list role.rolePermissions as ur>
                                                <#if ur.permissionStatus==1>
                                                    <a href="javascript:void(0)"><span class="label label-primary" style="line-height: 2;" data-id="${ur.permissionId}" title="${ur.permissionComment!}">${ur.permissionTag}</span></a>
                                                    <#else>
                                                        <a href="javascript:void(0)"><span class="label label-default" style="line-height: 2;" data-id="${ur.permissionId}" title="${ur.permissionComment!}">${ur.permissionTag}</span></a>
                                                </#if>
                                            </#list>
                                        </td>
                                        <td>
                                    <#if role.status==1>
                                            <button class="btn btn-default btn-sm" onclick="changeStatus(${role.roleId})">停用</button>
                                        <#else>
                                            <button class="btn btn-success btn-sm" onclick="changeStatus(${role.roleId})">启用</button>
                                    </#if>
                                        </td>
                                    </tr>
                                </#list>

                            </table>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                                <ul class="pagination pagination-sm pull-right">
                                    <#include "/common/page.ftl" />
                                </ul>
                        </div>
                    </div><!-- /.box -->
                </div>
            </div>

        </section><!-- /.content -->
    </aside><!-- /. -->
</div><!-- ./wrapper -->



<!-- Bootstrap -->
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>

<script>
    $('#keyword_input').change(function(){
        $('#keyword_page_id').val('');
    });
    function repreList(page){
        $('#keyword_page_id').val(page);
        $('#keyword_btn').click();
    }
    function changeStatus(uid){
        $.post('cgrole.json',{'pid':uid},function(data){
            if(data.result=='success'){
                window.location.reload();
            }
        });
    }
</script>

</body>
</html>